<template>
    <div>
        <div v-if="tab === 'desc'">
            <el-tabs type="border-card" v-if="detailData">
				<el-tab-pane label="商品详情">
					<div class="productDetails">
						<img v-for="itemImage in detailData.productDetailImgs.split(',')"
							class="img" :src="openURL+`/file/getFileByPath?filePath=`+itemImage"
							alt="" srcset="" />
					</div>
				</el-tab-pane>
				<el-tab-pane label="规格与包装">
					<div class="specifications">
						<div class="title-list">
							<div class="shu">
							</div>
							<div class="name">
								规格参数
							</div>
						</div>
						<div v-for="specifications in detailData.specificationObj" class="list">
							<div style="width: 200px;">
								{{specifications.key}}
							</div>
							<div style="width: 200px;">
								{{specifications.value}}
							</div>
						</div>
						<div class="title-list">
							<div class="shu">
							</div>
							<div class="name">
								商品包装
							</div>
						</div>
						<div class="productPack">
							{{detailData.productPack}}
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="资料下载">
					<div class="specifications">
						<div class="title-list">
							<div class="shu">
							</div>
							<div class="name">
								资料下载（点击可下载）
							</div>
						</div>
						<div class="ziliao">
							<div class="">
								<div style="cursor: pointer;margin-top: 14px;color: #3366ff;"
									v-for="item in detailData.productFiles.split(',')"
									@click="handleDownload(item)">
									{{item.split('_')[1]}}
								</div>
							</div>
							<!-- <div style=" margin-left: 30px;">
								点击资料可下载
							</div> -->
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
        </div>
	    <div v-else class="content-shop">
			<el-row>
				<el-col :span="1">
					<!-- <div class="grid-content ep-bg-purple" /> -->
				</el-col>
				<el-col :span="22">
					<div style="width: 100%;">
						<el-row :gutter="30">
							<el-col :span="8" v-if="detailData">
								<div class="box-left">
									<!-- <img src="../../../assets/excel-icon.png" class="img" alt="" srcset="" /> -->
									<div v-if="selectedImage" class="selected-image-container">
										<!-- <img :src="selectedImage" alt="Selected Image" class="img"> -->
										<img style="object-fit: contain;"
											:src="openURL+`/file/getFileByPath?filePath=`+selectedImage" alt=""
											srcset="" class="img" />
									</div>
									<div class="image-carousel">
										<button @click="moveImages(-1)" :disabled="!canMoveLeft">❮</button>
										<div class="image-list">
											<div v-for="(image, index) in visibleImages" :key="index" class="image-item"
												:class="{ 'selected': image.id === selectedIndex }"
												@click="selectImage(image.id)">
												<!-- <img :src="image.src" alt="Image" /> -->
												<img style="object-fit: contain; width: 65px;height: 65px;"
													:src="openURL+`/file/getFileByPath?filePath=`+image.src" />
											</div>
										</div>
										<button @click="moveImages(1)" :disabled="!canMoveRight">❯</button>
									</div>
								</div>
								<div style="margin-top: 12px;color: #777;font-size: 13px;">
									商品编号：{{detailData.id}}</div>
							</el-col>
							<el-col :span="12" class="text-box" v-if="detailData">
								<div class="title">
									{{detailData.productTitle}}
								</div>
								<div class="list" style="background-color: #eee;">
									<div class="name">
										<span>指</span>
										<span>导</span>
										<span>价：</span>
									</div>
									<div class="yuan" v-if='guidancePrice'>
										--
									</div>
								</div>

								<div v-for="(item,index) in transformedArrayData" :key='index'>
									<div v-if="item.key!='指导价'" class="list">
										<div class="name">
											<span v-for="item2 in item.key">{{item2}}</span>
										</div>
										<div class="">
											<div class="btn-list">
												<div :class="[originalArrayFirst[item.key]==item3.inputValue ? 'active' : '', 'btn']"
													v-for="(item3,index3) in item.value"
													@click="toclickItem(index3,item3.inputValue,item.key)">
													{{item3.inputValue}}
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="list">
									<div class="name">
										<span>
											采
										</span>
										<span>
											购
										</span>
										<span>
											量：
										</span>
									</div>
									<div>
										<el-input-number v-model="purchaseAmount" :min="1" :max="1000"
											@change="handleChange" />
									</div>
								</div>
								<div class="list">
									<div class="name">
										<span>
											服
										</span>
										<span>
											务
										</span>
										<span>
											支
										</span>
										<span>
											持：
										</span>
									</div>
									<div class="">
										<div class="tag-list" v-if="detailData">
											<div class="tag"
												v-for="(item,index) in detailData.serviceSupport.split(',')">
												{{item}}
											</div>
										</div>
									</div>
								</div>
								<div class="list" v-if="options.length>0">
									<div class="name">
										<span>
											施
										</span>
										<span>
											工
										</span>
										<span>
											服
										</span>
										<span>
											务：
										</span>
									</div>
									<div class="">
										<el-select v-model="value" placeholder="选择" style="width: 200px">
											<el-option v-for="item in options" :key="item.price"
												:label="item.serviceName" :value="item.price"
												@click="changeOption(item)">
												<span style="float: left">{{ item.serviceName }}</span>
												<span style="
												          float: right;
												          color: var(--el-text-color-secondary);
												          font-size: 14px;
												        ">￥
													{{ item.price }}/{{item.unit}}
												</span>
											</el-option>
										</el-select>
									</div>
								</div>
								<div class="list">
									<div class="name">

									</div>
									<div class="buttion">
										<el-button color="#2056f8" size="large"
											@click="handleClick">获取报价</el-button>
									</div>
								</div>
							</el-col>
							<el-col :span="4">
								<div class="box-right">
									<div class="name-list">
										<div style="color: #666;font-size: 13px;">大家都在看</div>
										<!-- <div style="color: #666;font-size: 12px;">换一批</div> -->
									</div>
									<div class="box-right-item" v-for="(item,index) in lookListData" :key="index"
										@click="getShopDetail(item.id)">
										<!-- <img class="img" src="../../../assets/1.png" alt="" srcset="" /> -->
										<img style="object-fit: contain;"
											:src="openURL+`/file/getFileByPath?filePath=`+item.productImgs.split(',')[0]"
											alt="" srcset="" class="img" />
										<div class="box-right-item-text">
											{{item.productTitle}}
										</div>
										
									</div>
								</div>
							</el-col>
						</el-row>
						<div class="combinations" v-if="combinationsList.length>0">
							<div class="name">
								推荐搭配
							</div>
							<div class="shop">
								<div class="item" v-if="detailData">
									<!-- <img src="../../../assets/excel-icon.png" alt="" srcset="" class="image" /> -->
									<img style="object-fit: contain;"
										:src="openURL+`/file/getFileByPath?filePath=`+detailData.productImgs.split(',')[0]"
										alt="" srcset="" class="image" />
									<div class="text">
										{{detailData.productTitle}}
									</div>
									
									<div>
										<el-input-number width="180px" v-model="purchaseAmount" :min="1" :max="1000"
											@change="handleChange" />
									</div>

								</div>
								<div class="add">
									+
								</div>
								<div class="">
									<div class="image-carousel">
										<div class="btn">
											<button @click="combinationsMoveImages(-1)"
												:disabled="!combinationsMoveLeft">❮</button>
										</div>
										<div class="image-list">

											<div v-for="(item, index) in combinationsListItem" :key="index"
												class="image-item item">
												<!-- <img :src="item.src" alt="" srcset="" class="image" /> -->
												<img style="object-fit: contain;"
													:src="openURL+`/file/getFileByPath?filePath=`+item.productImgs.split(',')[0]"
													alt="" srcset="" class="image" />
												<div class="text"  @click="getShopDetail(item.id)">
													{{item.productTitle}}
												</div>
												<div class="money">
                                                
												</div>
												<div>
													<el-input-number v-model="item.productSum" :min="0" :max="1000"
														@change="handleChangeRecommend(item)" />
												</div>
											</div>
										</div>
										<div class="btn">
											<button @click="combinationsMoveImages(1)"
												:disabled="!combinationsMoveRight">❯</button>
										</div>
									</div>
								</div>
								<div class="equalto">
									=
								</div>
								<div class="shop-right">
									<div class="list">
										<div class="txt">
											已选择{{handleChangeRecommendList.length+1}}个商品
										</div>
										<!-- 	<div>
											<el-icon>
												<QuestionFilled />
											</el-icon>
										</div> -->
									</div>
									<div class="price">
										组合价： ???
									</div>
									<el-button color="#2056f8" size="large" @click="handleClick">获取报价</el-button>
								</div>
							</div>
						</div>
						<el-row :gutter="20" style="margin-top: 30px;padding-bottom: 110px;">
							<el-col :span="5">
								<div class="box-left-wrap">
									<div class="name-list">
										<div style="color: #111;font-size: 18px;margin-left: 10px;">热卖推荐</div>
									</div>
									<div class="box-right-item" v-for="(item,index) in hostListData" :key="index"
										@click="getShopDetail(item.id)">
										<div class="img-b">
											<!-- <img class="img" src="../../../assets/1.png" alt="" srcset="" /> -->

											<img style="object-fit: contain;"
												:src="openURL+`/file/getFileByPath?filePath=`+item.productImgs.split(',')[0]"
												alt="" srcset="" class="img" />
										</div>
										<div class="box-right-item-yuan">
										</div>
										<div class="box-right-item-text">
											{{item.productTitle}}
										</div>
									</div>
								</div>
							</el-col>
							<el-col :span="19">
								<el-tabs type="border-card" v-if="detailData">
									<el-tab-pane label="商品详情">
										<div class="productDetails">
											<img v-for="itemImage in detailData.productDetailImgs.split(',')"
												class="img" :src="openURL+`/file/getFileByPath?filePath=`+itemImage"
												alt="" srcset="" />
										</div>
									</el-tab-pane>
									<el-tab-pane label="规格与包装">
										<div class="specifications">
											<div class="title-list">
												<div class="shu">

												</div>
												<div class="name">
													规格参数
												</div>
											</div>
											<div v-for="specifications in detailData.specificationObj" class="list">
												<div style="width: 200px;">
													{{specifications.key}}
												</div>
												<div style="width: 200px;">
													{{specifications.value}}
												</div>
											</div>
											<div class="title-list">
												<div class="shu">

												</div>
												<div class="name">
													商品包装
												</div>
											</div>
											<div class="productPack">
												{{detailData.productPack}}
											</div>
										</div>
									</el-tab-pane>
									<el-tab-pane label="资料下载">
										<div class="specifications">
											<div class="title-list">
												<div class="shu">

												</div>
												<div class="name">
													资料下载（点击可下载）
												</div>
											</div>
											<div class="ziliao">
												<div class="">
													<div style="cursor: pointer;margin-top: 14px;color: #3366ff;"
														v-for="item in detailData.productFiles.split(',')"
														@click="handleDownload(item)">
														{{item.split('_')[1]}}
													</div>
												</div>
												<!-- <div style=" margin-left: 30px;">
													点击资料可下载
												</div> -->
											</div>
										</div>
									</el-tab-pane>
								</el-tabs>
							</el-col>
						</el-row>
					</div>

				</el-col>
				<el-col :span="1">
					<!-- <div class="grid-content ep-bg-purple" /> -->
				</el-col>
			</el-row>
		
	</div>
    </div>
</template>

<script setup>
	import { ref, computed, watch, onMounted } from 'vue'
	import { QuestionFilled, ShoppingCart, Service } from '@element-plus/icons-vue'
	import { getEquipmentDetail, getRecommendList } from '@/api/global.js';
	import { ElMessage } from 'element-plus';
	import { useRoute } from 'vue-router';
	import { openURL } from '@/utils/axios.js';

	const route = useRoute();
	const guidancePrice = ref(null)
    const props = defineProps({
        id:String,
        tab:String
    })
	const num = ref(1)
	const purchaseAmount = ref(1)
	const handleChange = (value) => {
		console.log(originalArrayFirst.value)
		// guidancePrice.value = Number(guidancePrice.value)  * purchaseAmount.value
		handleChangeRecommend()
	}

	const handleChangeRecommendList = ref([])
	const assemble =ref(null)
	
	const handleChangeRecommend = () => {

		let price = 0, list = []
		for (var i = 0; i < combinationsListItem.value.length; i++) {
			console.log(combinationsListItem.value[i])
			price += Number(combinationsListItem.value[i].specificationTemplate[0]['指导价']) * combinationsListItem.value[i].productSum
			console.log(price)
			if (combinationsListItem.value[i].productSum > 0) {
				list.push({
					accumulationEnable:true,
					productNo: combinationsListItem.value[i].id,
					productPrice: combinationsListItem.value[i].specificationTemplate[0]["指导价"],
					productSum: combinationsListItem.value[i].productSum
				})
			}
		}
		handleChangeRecommendList.value = list
		let assembleData = price + Number(guidancePrice.value) * purchaseAmount.value
		console.log(assembleData)
		assemble.value=assembleData
	}
	
	const value = ref('')
	const options = ref([])
	const images = ref([
		// {
		// 	src: '/src/assets/excel-icon.png',
		// 	id: 1
		// }, {
		// 	src: '/src/assets/pdf-icon.png',
		// 	id: 2
		// }, {
		// 	src: '/src/assets/ppt-icon.png',
		// 	id: 3
		// }, {
		// 	src: '/src/assets/word-icon.png',
		// 	id: 4
		// }, {
		// 	src: '/src/assets/video-icon.png',
		// 	id: 5
		// }
	]);

	const currentIndex = ref(0);// 控制显示的图片切片起始索引

	const visibleImages = computed(() => {
		if (images.value.length > 4) {
			const start = currentIndex.value;
			const end = Math.min(start + 4, images.value.length);
			return images.value.slice(start, end);
		} else {
			return images.value;
		}
	});

	const canMoveLeft = computed(() => currentIndex.value > 0);
	const canMoveRight = computed(() => currentIndex.value + 4 < images.value.length);

	function moveImages(step) {
		if (step < 0 && canMoveLeft.value) {
			currentIndex.value--;
		} else if (step > 0 && canMoveRight.value) {
			currentIndex.value++;
		}
	}

	const selectedIndex = ref(); // 跟踪选中的图片索引  
	const selectedImage = ref();; // 选中图片的URL  

	function selectImage(index) {
		// 确保选中的图片在可视范围内  
		selectedIndex.value = index;
		images.value.map((item) => {
			if (selectedIndex.value == item.id) {
				selectedImage.value = item.src
			}
		})
	}
	const combinationsList = ref([
		// {
		// 	src: '/src/assets/excel-icon.png',
		// 	id: 1
		// }, {
		// 	src: '/src/assets/pdf-icon.png',
		// 	id: 2
		// }
	]);

	const combinationsIndex = ref(0);// 控制显示的图片切片起始索引

	const combinationsListItem = computed(() => {
		if (combinationsList.value.length > 5) {
			const start = combinationsIndex.value;
			const end = Math.min(start + 5, combinationsList.value.length);
			return combinationsList.value.slice(start, end);
		} else {
			return combinationsList.value
		}

	});

	const combinationsMoveLeft = computed(() => combinationsIndex.value > 0);
	const combinationsMoveRight = computed(() => combinationsIndex.value + 5 < combinationsList.value.length);

	function combinationsMoveImages(step) {
		if (step < 0 && combinationsMoveLeft.value) {
			combinationsIndex.value--;
		} else if (step > 0 && combinationsMoveRight.value) {
			combinationsIndex.value++;
		}
	}


	const detailData = ref(null)
	const transformedArrayData = ref([])
	const originalArrayFirst = ref(null)
	const originalArrayList = ref()
	const specificationParameters = ref()
	const getShopDetail = (id) => {
		let data = {
			id: id
		}
		images.value.length = 0
		getEquipmentDetail(data).then(res => {
			
			if ( res.data.code === 200 ) {
                detailData.value = res.data.data.energyEquipmentMallEntity
			    options.value = res.data.data.energyEquipmentMallEntity.buildServiceTemplate
			    const originalArray = res.data.data.energyEquipmentMallEntity.specificationTemplate
			    originalArrayList.value = res.data.data.energyEquipmentMallEntity.specificationTemplate
			    originalArrayFirst.value = originalArray[0]

			    guidancePrice.value = originalArray[0]["指导价"];
			    let list =  JSON.parse(JSON.stringify(originalArray[0]));
			    console.log(list)
			    // specificationParameters.value = originalArray[0]
			    if (list.hasOwnProperty("指导价")) {
			    	delete list["指导价"];
			    }
			    specificationParameters.value=list
			    console.log(originalArrayList.value)
			    let energyEquipmentMallVOList = res.data.data.energyEquipmentMallVOList
			    if (energyEquipmentMallVOList.length > 0) {
			    	for (var i = 0; i < energyEquipmentMallVOList.length; i++) {
			    		energyEquipmentMallVOList[i].productSum = 0
			    	}
			    }
			    console.log(energyEquipmentMallVOList)
			    combinationsList.value = energyEquipmentMallVOList
			    let productImgs = res.data.data.energyEquipmentMallEntity.productImgs.split(',')
			    for (var i = 0; i < productImgs.length; i++) {
			    	images.value.push({
			    		src: productImgs[i],
			    		id: i
			    	})
			    }
			    selectedIndex.value = images.value[0].id
			    selectedImage.value = images.value[0].src

			    // Step 1: Collect all keys dynamically
			    const allKeys = new Set();
			    originalArray.forEach(item => {
			    	Object.keys(item).forEach(key => allKeys.add(key));
			    });

			    // Step 2: Initialize an object to collect unique values for each key
			    const collectedValues = {};
			    allKeys.forEach(key => {
			    	collectedValues[key] = new Set();
			    });

			    // Step 3: Collect unique values from the input array
			    originalArray.forEach(item => {
			    	Object.keys(collectedValues).forEach(key => {
			    		collectedValues[key].add(item[key]);
			    	});
			    });

			    // Step 4: Convert the collected values to the desired format
			    const result = Array.from(allKeys, key => ({
			    	key: key,
			    	value: Array.from(collectedValues[key], inputValue => ({ inputValue: inputValue }))
			    }));
			    console.log(result);
			    transformedArrayData.value = result
			
			    getList()
			    getListHost()
            }
			
		})
	}

	const toclickItem = (index, value, key) => {
		const conditionObj = JSON.parse(JSON.stringify(originalArrayFirst.value));
		conditionObj[key] = value
		console.log(conditionObj)
		if (conditionObj.hasOwnProperty("指导价")) {
			delete conditionObj["指导价"];
		}
		specificationParameters.value = conditionObj
		// 目标键，假设要获取的键是固定的
		let targetKey = "指导价";

		// 获取动态键名组成的数组
		let conditionKeys = Object.keys(conditionObj);
		console.log(originalArrayList.value)
		// 使用 find 方法找到符合条件的对象
		const foundObject = originalArrayList.value.find(item =>
			conditionKeys.every(key => item[key] === conditionObj[key])
		);

		// 检查是否找到了对象
		if (foundObject) {
			const targetValue = Number(foundObject[targetKey]); // 根据动态键获取值
			guidancePrice.value = targetValue
			originalArrayFirst.value = foundObject
			console.log(`${targetKey}的值是: ${targetValue}`);
		} else {
			console.log('未找到符合条件的元素');
		}

	}

	const buildServiceTemplate = ref()
	const changeOption = (item) => {
		console.log(item)
		buildServiceTemplate.value = item
	}

	const lookListData = ref([])
	const getList = () => {
		let data = {
			tree: false,
			otherProduct: false,
			page: 1,
			pageSize: 3
		}
		getRecommendList(data).then(res => {
			lookListData.value = res.data.data.energyEquipmentMallEntities
		})
	}
	const hostListData = ref([])
	const getListHost = () => {
		let data = {
			tree: false,
			otherProduct: true,
			page: 1,
			pageSize: 3
		}
		getRecommendList(data).then(res => {
			hostListData.value = res.data.data.energyEquipmentMallEntities
		})
	}

	const handleDownload = (path) => {
		let temp = path.split('_');
		let fileName = temp.length > 1 ? temp[temp.length - 1] : '定制化';
		let a = document.createElement("a");
		if ('download' in a) {
			a.download = fileName;
		}
		(document.body || document.documentElement).appendChild(a);
		a.href = `${openURL}/file/getFileByPath?filePath=${path}`;
		a.target = '_parent';
		a.click();// 设置点击事件
		a.remove(); // 移除a标签
	};
    const handleClick = ()=>{
        window.open('http://iot.ifmcs.com', '__blank');
    }
	onMounted(() => {
		getShopDetail(props.id);
		
	})
</script>

<style scoped>
	.specifications { }
	.specifications	.title-list {
		display: flex;
		align-items: center;
		margin: 20px 0 16px;
    }
    .specifications .shu {
        width: 4px;
		height: 16px;
		background-color: #007bff;
		margin-right: 12px;
    }
	.specifications .name {
        font-size: 15px;
		font-weight: bold;
    }
    .specifications .ziliao {
		display: flex;
		align-items: center;
		
    }
    .specifications .list {
        display: flex;
		align-items: center;
		padding: 6px 30px;
    }
		
    .specifications .productPack {
        font-size: 14px;
		color: #777;
    }
	
	.productDetails {
		text-align: center;
	}
    .productDetails img {
        width:100%;
    }
	
	.content-shop {
		width: 100%;
		padding-top: 30px;
		background-color: #fff;
		position: relative;
    }
    .content-shop .fixedbutton {
        position: absolute;
		top: 46%;
		/* 距离顶部50% */
		right: 0%;
		/* 距离左边50% */
		transform: translate(-50%, -50%);
		/* 通过translate移动自身宽高的一半 */
		background-color: #FFF;
		padding: 6px;
		border-radius: 30px;
		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    }
    .content-shop .fixedbutton .item {
        padding: 6px;
		background-color: #c7e0f7;
		border-radius: 18px;
		cursor: pointer;
    }
    .content-shop .box-left-wrap {
        border: 1px solid #eee;
    }
    .box-left-wrap .name-list {
        display: flex;
		justify-content: space-between;
		padding: 20px 10px;
		border-bottom: 1px solid #eee;
		background-color: #f7f7f7;
    }
    .box-left-wrap .box-right-item {
        margin-top: 10px;
		padding: 20px;
		cursor: pointer;
    }
    .box-left-wrap .box-right-item .img-b {
        width: 100%;
		text-align: center;
    }
    .box-left-wrap .box-right-item .img-b .img {
        width: 90px;
		height: 90px;
    }
    .box-right-item .box-right-item-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 显示3行 */
        overflow: hidden;
        text-overflow: ellipsis; /* 多行时显示省略号 */
        white-space:normal;
        height:60px;
        line-height:24px;
        padding: 12px 0;
		font-size: 14px;
		color: #555;
    }
    .box-right-item .box-right-item-yuan {
        font-size: 14px;
		color: #fc1919;
    }

    .content-shop .combinations {
        padding: 44px 0 60px;
		width: 100%;
    }
    .content-shop .combinations .name {
        font-size: 14px;
		color: #888;
		padding: 0 0 10px 10px;
		border-bottom: 1px solid #bbb;
    }
    .content-shop .combinations .shop {
        display: flex;
		align-items: center;
		padding-top: 40px;
        text-align:center;
    }
    .combinations .shop .item {
        width:40%;
    }
    .combinations .shop .item .image {
        width: 100px;
		height: 100px;
    }
    .combinations .shop .item .text {
        cursor: pointer;
		font-size: 12px;
		color: #666;
		height: 46px;
		margin: 4px 0 10px;
    }
    .combinations .shop .item .money {
        font-size: 13px;
		color: #fc1919;
		margin-bottom: 10px;
    }
    .combinations .shop .add {
        font-size: 55px;
		color: #dad9d9;
		margin-right: 18px;
    }
    .combinations .shop .equalto {
        font-size: 55px;
		color: #dad9d9;
		margin: 0 18px;
    }
    .combinations .shop .shop-right .list {
        display:flex;
    }
    .combinations .shop .shop-right .list .txt {
        font-size: 13px;
		color: #777;
		margin-right: 10px;
    }
    .combinations .shop .shop-right .price {
        font-size: 14px;
		color: #333;
		margin: 20px 0 32px;
    }
	.combinations .shop .image-carousel {
        padding: 10px 0;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;
		width: 100%;
    }
    .combinations .shop .image-carousel .btn {
        width: 20px;
		height: 100%;
		margin: 0 20px 0 10px;
		background-color: #efeff2;
		display: flex;
		justify-content: center;
		align-items: center;
    }
    .combinations .shop .image-carousel .btn button {
        border: none;
		background-color: transparent;
		cursor: pointer;
		padding: 44px 10px;
		font-size: 20px;
    }
    .combinations .shop .image-list {
        display: flex;
		transition: transform 0.3s ease;
		width: 100%;
		overflow: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding: 10px;
    }
    .combinations .shop .image-item {
        scroll-snap-align: start;
		flex-shrink: 1;
		margin: 0 10px;
		transition: transform 0.3s ease;
    }
    .combinations .shop .image-item img {
        width: 91%;
		height: auto;
		display: block;
		padding: 4px;
    }
    .box-left {
        border: 1px solid #eee;
		text-align: center;
    }
    .box-left .img {
        width: 336px;
		height: 336px;
		margin: 10px 0;
    }
    .box-left .image-carousel {
        border-top: 1px solid #eee;
		padding: 10px 0;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;
		width: 100%;
    }
    .box-left .image-list {
        display: flex;
		transition: transform 0.3s ease;
		width: 100%;
		overflow: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding: 10px;
    }
    .box-left .image-item {
        scroll-snap-align: start;
		flex-shrink: 1;
		margin: 0 10px;
		transition: transform 0.3s ease;
    }
    .box-left .image-item img {
        width: 91%;
		height: auto;
		display: block;
		padding: 4px;
    }
    .box-left .image-item.selected img {
        border: 3px solid #007bff;
    }
    .box-left button {
        border: none;
		background-color: transparent;
		cursor: pointer;
		padding: 10px;
		font-size: 20px;
    }
		
    .box-right {
        border: 1px solid #eee;
    }
    .box-right .name-list {
        display: flex;
		justify-content: space-between;
		padding: 20px 10px;
		border-bottom: 1px solid #eee;
    }
    .box-right .box-right-item {
		padding-bottom: 10px;
		text-align: center;
		cursor: pointer;
        padding:14px;
    }
    .box-right .box-right-item .img {
        width: 60px;
		height: 60px;
    }
    
    .text-box .title {
        font-size: 18px;
        line-height:24px;
        text-align:left;
		color: #333;
		font-weight: bold;
		margin-bottom: 14px;
    }
    .text-box .list {
        display: flex;
		align-items: center;
		padding: 10px;
    }
    .text-box .list .tag-list {
        display: flex;
    }
    .text-box .list .tag-list .tag {
        border: 1px solid #6a8df6;
		color: #2056f8;
		padding: 4px 10px;
		background-color: #e1e7fa;
		margin-right: 10px;
    }
    .text-box .list .buttion {
        display: flex;
    }
    .text-box .list .btn-list {
        display: flex;
		flex-wrap: wrap;
		cursor: pointer;
    }
    .text-box .list .btn-list .btn {
        padding: 6px 14px;
		border: 1px solid #999;
		border-radius: 4px;
		font-size: 14px;
		color: #666;
		height: 32px;
		display: flex;
		align-items: center;
		margin: 4px 10px 4px 0;
    }
    .text-box .list .btn-list .active {
        border: 1px solid #2056f8;
		color: #2056f8;
    }
    .text-box .list .name {
        width: 72px;
		display: flex;
		justify-content: space-between;
		font-size: 15px;
		color: #4f4545;
		margin-right: 10px;
    }
    .text-box .list .yuan {
        font-size: 18px;
		color: #ce0404;
    }

		
	.grid-content {
		border-radius: 4px;
		min-height: 100px;
		background-color: #eee;
	}

	.gridpurple {
		min-height: 100px;
		background-color: #aaa;
	}
	
</style>